<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/login.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <div class="nav">
      <!-- logo -->
      <img src="./images/logo_003.jpg" alt="" />
      <div class="content">
        <span>我的博客系统</span>
        <div class="opts">
          <a href="blog_list.html">主页</a>
          <a href="blog_eidt.html">写博客</a>
        </div>
      </div>
    </div>
    <!-- 登录框 -->
    <div class="login-container">
      <form action="login" method="post">
        <div class="dialog">
          <div class="title">用户登录</div>
          <div class="row">
            <span>用户名</span>
            <input type="text" id="username" name="username" />
          </div>
          <div class="row">
            <span>密码</span>
            <input type="password" id="password" name="password" />
          </div>
          <div class="row">
            <button type="submit">提交</button>
          </div>
        </div>
      </form>
    </div>
  </body>
  <!-- 引入jQuery -->
  <!-- 相对路径 -->
  <script src="js/jquery-3.6.3.min.js"></script>
  <script>
    let formEl = document.querySelector("form");
    formEl.onsubmit = function () {
      // 校验
      let username = document.querySelector("#username").value;
      if (!username) {
        alert("请输入用户名");
        // 让输入框获取焦点
        querySelector("#username").focus();
        // 返回的这个false是阻止表单提交的
        return false;
      }
      let password = document.querySelector("#password").value;
      if (!password) {
        alert("请输入密码");
        querySelector("#password").focus();
        // 返回的这个false是阻止表单提交的
        return false;
      }
    };
  </script>
</html>
